<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>CodePen - 3d text</title>
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">-->
<!--<link href="/css/gogozhifuSusseccPage.css" th:href="@{/css/gogozhifuSusseccPage.css}" rel="stylesheet">-->

</head>
<body>
<!-- partial:index.partial.html -->
<div class="scene">
  <div class="banner">
   <div class="panel"></div>
   <div class="panel"></div>
   <div class="panel"></div>
   <div class="panel"></div>
   <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
  </div>
  <div class="screen"></div>
</div>
<!-- partial -->
  
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script th:src="@{/js/jquery.cookie.js}"></script>
<link rel="stylesheet" href="/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/layuimini/css/public.css" media="all">
<script type="text/javascript">
 $(function () {
  $.get("/user/doVip",function(data) {
   if (data.code==200){
    $.cookie("restToken", data.data.token);
    layer.msg(data.msg, {
     offset: '15px',
     icon: 1,
     time: 1000
    })
   }else{
   }
  },"json");
 })
</script>
<style>
    body {
        background-color: #000;
        color: #fff;
        min-height: 100vh;
        display: grid;
        place-items: center;
        perspective: 500px;
        perspective-origin: 50% calc(50% - 150px);
    }

    .scene {
        position: relative;
        transform-style: preserve-3d;
    }

    .banner {
        display: flex;
        transform-style: preserve-3d;
        -webkit-animation: rotate 24s infinite linear;
        animation: rotate 24s infinite linear;
    }

    @-webkit-keyframes rotate {
        to {
            transform: rotateY(-360deg);
        }
    }

    @keyframes rotate {
        to {
            transform: rotateY(-360deg);
        }
    }
    .panel {
        position: absolute;
        transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(190px);
        width: 50px;
        height: 120px;
        overflow: hidden;
    }

    .panel::before {
        position: absolute;
        left: var(--left);
        content: "Successful payment, respected vip user!";
        font-size: 96px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        color: hsl(var(--hue), 75%, 75%);
    }

    .panel:nth-child(1) {
        --left: 0px;
        --hue: 0;
        --angle: 0deg;
    }

    .panel:nth-child(2) {
        --left: -50px;
        --hue: 15;
        --angle: 15deg;
    }

    .panel:nth-child(3) {
        --left: -100px;
        --hue: 30;
        --angle: 30deg;
    }

    .panel:nth-child(4) {
        --left: -150px;
        --hue: 45;
        --angle: 45deg;
    }

    .panel:nth-child(5) {
        --left: -200px;
        --hue: 60;
        --angle: 60deg;
    }

    .panel:nth-child(6) {
        --left: -250px;
        --hue: 75;
        --angle: 75deg;
    }

    .panel:nth-child(7) {
        --left: -300px;
        --hue: 90;
        --angle: 90deg;
    }

    .panel:nth-child(8) {
        --left: -350px;
        --hue: 105;
        --angle: 105deg;
    }

    .panel:nth-child(9) {
        --left: -400px;
        --hue: 120;
        --angle: 120deg;
    }

    .panel:nth-child(10) {
        --left: -450px;
        --hue: 135;
        --angle: 135deg;
    }

    .panel:nth-child(11) {
        --left: -500px;
        --hue: 150;
        --angle: 150deg;
    }

    .panel:nth-child(12) {
        --left: -550px;
        --hue: 165;
        --angle: 165deg;
    }

    .panel:nth-child(13) {
        --left: -600px;
        --hue: 180;
        --angle: 180deg;
    }

    .panel:nth-child(14) {
        --left: -650px;
        --hue: 195;
        --angle: 195deg;
    }

    .panel:nth-child(15) {
        --left: -700px;
        --hue: 210;
        --angle: 210deg;
    }

    .panel:nth-child(16) {
        --left: -750px;
        --hue: 225;
        --angle: 225deg;
    }

    .panel:nth-child(17) {
        --left: -800px;
        --hue: 240;
        --angle: 240deg;
    }

    .panel:nth-child(18) {
        --left: -850px;
        --hue: 255;
        --angle: 255deg;
    }

    .panel:nth-child(19) {
        --left: -900px;
        --hue: 270;
        --angle: 270deg;
    }

    .panel:nth-child(20) {
        --left: -950px;
        --hue: 285;
        --angle: 285deg;
    }

    .panel:nth-child(21) {
        --left: -1000px;
        --hue: 300;
        --angle: 300deg;
    }

    .panel:nth-child(22) {
        --left: -1050px;
        --hue: 315;
        --angle: 315deg;
    }

    .panel:nth-child(23) {
        --left: -1100px;
        --hue: 330;
        --angle: 330deg;
    }

    .panel:nth-child(24) {
        --left: -1150px;
        --hue: 345;
        --angle: 345deg;
    }

    .screen {
        position: absolute;
        width: 400px;
        height: 400px;
        background-image: linear-gradient(90deg, #000a, #0004, #000a);
        transform: translate(-50%, -50%);
    }
</style>
</html>
